# Math blocks

You can render math blocks via [remark-math](https://github.com/remarkjs/remark-math/blob/master/packages/remark-math) and [rehype-katex](https://github.com/remarkjs/remark-math/blob/master/packages/rehype-katex). remark-math parses math blocks and rehype-katex transforms the blocks into html elements with classes for styling.Also, you need to apply css style of KaTeX by yourself to render them properly.

First, link a stylesheet and use the `$` syntax:

```mdx
<!-- index.mdx -->

<!-- Apply katex css -->

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/katex@0.11.0/dist/katex.min.css"
  integrity="sha384-BdGj8xC2eZkQaxoQ8nSLefg4AV4/AwB3Fj+8SUSo7pnKP6Eoy18liIKTPn9oBYNG"
  crossOrigin="anonymous"
/>

Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following equation.

$$
L = \frac{1}{2} \rho v^2 S C_L
$$
```

Then, configure webpack by using the remark-math and rehype-katex plugins:

```js
// webpack.config.js
const remarkMath = require('remark-math')
const rehypeKatex = require('rehype-katex')

module.exports = {
  module: {
    // ...
    rules: [
      // ...
      {
        test: /.mdx?$/,
        use: [
          'babel-loader',
          {
            resolve: '@mdx-js/loader',
            options: {
              remarkPlugins: [remarkMath],
              rehypePlugins: [rehypeKatex]
            }
          }
        ]
      }
    ]
  }
}
```

If you’re using MDX with Next.js, you can use `@next/mdx` with the following configuration:

```js
// next.config.js
const remarkMath = require('remark-math')
const rehypeKatex = require('rehype-katex')

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkMath],
    rehypePlugins: [rehypeKatex]
  }
})

module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'md', 'mdx']
})
```
